<script type="text/javascript">
	{literal}
	$(document).ready(function() {
				
		// register sorter
		$('#service_list').tablesorter();
	});	
	{/literal}
</script>

<br />
<div class="form_container" style="width: 760px;">

	<table cellspacing="0" cellpadding="0">
		<tr>
			<td class="label">{translate}Service group{/translate}</td>
			<td class="field">
				<select id="serviceGroupList" style="margin-left: 5px; width: 150px">
					{html_options options=$serviceGroupList}
					<option value="Others">{translate}Others{/translate}</option>
				</select>				
			</td>
			
			<td class="label">{translate}Status_1{/translate}</td>
			<td class="field" rowspan="2">
				<select  id="disabled" style="margin-left: 5px;">
					<option value="all" label="{translate}All{/translate}" selected="selected">{translate}All{/translate}</option>
					<option value="0" label="{translate}In Use{/translate}">{translate}In Use{/translate}</option>
					<option value="1" label="{translate}Lock{/translate}">{translate}Lock{/translate}</option>
				</select>				
			</td>
			
			<td class="field" rowspan="2" align="right" width="100px">
				<div id="search_button">
					<a href="javascript:listService();" title="{translate}List of services{/translate}">
						<img src="{$base_uri}/images/search.png" alt="{translate}List{/translate}" />
					</a>
				</div>
				<div style="display:none;">
					<img src="{$base_uri}images/ajax-loader.gif"/>
				</div>				
			</td>									
		</tr>
		<tr>
			<td id="current_dept" class="field" colspan="3"></td>
		</tr>
	</table>
</div>

<div id="service_container" style="display:none; margin-top: 5px">
	{include file="main/big_element_paging.html"}
	<table id="service_list" cellspacing="0" cellpadding="0" class="grid" width="780px">
		<thead>
			<tr>
				<th class="first">{translate}Order number{/translate}</th>
				<th>{translate}Service{/translate}</th>
				<th>{translate}Code{/translate}</th>
				<th>{translate}Price{/translate}</th>								
				<th>{translate}Insuarance Price{/translate}</th>
				<th>{translate}Status_1{/translate}</th>
				<th class='last'>&nbsp;</th>						
			</tr>
		</thead>
		<tbody>
		</tbody>
	</table>		
</div>
